<template>
	<custom-nav :showBackArrow="true" :title="showTopic?showTopic:''"></custom-nav>
	<view class="page-topic" :style="pagePaddingTop">
		<template v-if="pageLoading">
			<view v-if="tagList&&tagList.length>0" class="wrap-subtopic">
				<view v-for="(item,idx) in tagList" :key="idx"
					:class="['item-subtopic',(idx==(tagList.length-1)&&idx%2===0)?'fill':'']" @tap="toSubtopic(item)">
					<view>{{item.mid_table_remark_015}}</view>
					<view class="cont-description">{{item.mid_table_remark_015}}</view>
				</view>
			</view>
			<view class="wrap-recommend-title">
				<view class="wrap-logo-title">
					<image class="icon-logo" src="/static/robot@3x.png"></image>
					<view class="cont-title">
						<image class="img-title" src="/static/title_recommend.png"></image>
						<image class="img-line" src="/static/recommended_reply_line.png"></image>
					</view>
				</view>
				<view class="wrap-search">
					<comp-search v-model="txtSearch" @confirm="onConfirmSearch"></comp-search>
				</view>
			</view>
			<view class="wrap-list">
				<template v-if="list.length">
					<view v-for="(item,idx) in list" :key="idx" class="wrap-list-item">
						<comp-recommend-item :itemIdx="idx" itemType="praise" :itemData='item' @onLike="onLikeItem"
							@onDetail="handleToChatTheir"></comp-recommend-item>
					</view>
				</template>
				<view v-else class="box-empty">
					<image class="icon-none" src="/static/icon_none.png"></image>
				</view>

			</view>
			<view class="container-bottom" @tap="handleToChat">
				<view class="btn">提问
					<view class="icon-go">
						<image class="img-go" src="/static/icon_more_arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="ball" @tap="handleToPost">
				<image src="/static/comment.png" mode="aspectFit" style="width: 49rpx;height: 48rpx;"></image>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue"
	import {
		showDecodeBase64,
		showBRContent,
		encodeBase64
	} from "@/utils/tool.js"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import {
		useUser
	} from "@/hooks/useUser.js"

	// import TopicNav from "@/components/topic-nav/index.vue"
	import CompSearch from "@/components/search/index.vue"
	import CompRecommendItem from "@/components/recommend-item/index.vue"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let currentIndustryId = ref("")
	let showTopic = ref(null)
	// 用户信息
	const userStore = useUser();
	let userInfo = ref(null)
	userStore.getUserInfo().then(async res => {
		userInfo.value = res?.public_user_info || {};
	}, err => {
		console.log(err, '>>>userinfo')
	})
	onLoad((options) => {
		let name = options.name ? decodeURIComponent(options.name) : '';

		let industryId = options.id;
		showTopic.value = name
		currentIndustryId.value = industryId

	})
	let pageLoading = ref(false)
	let tagList = ref([])
	// 获取标签列表既是
	const getTagList = () => {
		let queryData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
			type_middle_app: 30001,
			type_inner_app: 1001,
			is_online: 0,
			// pre_db_para_begin_idx: 0,
			// pre_db_para_length_4_list: 10,
			pre_db_para_order_by_para: "id_public_middle_table DESC",
			mid_table_remark_008_in: currentIndustryId.value,
			pre_db_para_group_by_para: 'mid_table_remark_015'
		}
		return middleAPI(queryData,false)
	}

	// 页面数据列表
	let page = ref(1);
	const pageSize = 20
	let txtSearch = ref("");
	let list = ref([]);
	let notMore = ref(false)
	const getList = async () => {
		let queryData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
			type_middle_app: 30001,
			type_inner_app: 1001,
			is_online: 0,
			pre_db_para_begin_idx: (page.value - 1) * pageSize,
			pre_db_para_length_4_list: pageSize,
			pre_db_para_order_by_para: "id_public_middle_table DESC",
			mid_table_remark_008_in: currentIndustryId.value,
			pre_db_para_group_by_para: 'mid_table_remark_013',
			pre_cmd_para_show_main_info: true
		}
		if (txtSearch.value) {
		
			queryData.pre_db_para_search_condition=encodeBase64(txtSearch.value)
			queryData.pre_db_para_search_condition_key="mid_table_remark_001,mid_table_remark_002"
			// queryData.mid_table_remark_001_like = encodeBase64(txtSearch.value)
		}
		// console.log('>>>,queryData',queryData)
		let response = await middleAPI(queryData).catch((err) => {
			console.log(err, '加载会话列表失败')
			let nextPage = page.value - 1;
			page.value = nextPage > 0 ? nextPage : 1;
		});
		if (response) {
			let tmpList = list.value;
			let result = response?.page_content || [];
			if (result.length < pageSize) {
				notMore.value = true;
			}
			for (let i = 0; i < result.length; i++) {
				let item = result[i]
				item.show_mid_table_remark_001 = showBRContent(showDecodeBase64(item?.mid_table_remark_001 || ""))
				item.show_mid_table_remark_002 = showBRContent(showDecodeBase64(item?.mid_table_remark_002 || ""))
				item.show_save_data_003 = ((item?.save_data_003 || [])[0]) || null
				item.show_save_data_005 = (item?.save_data_005 || 0)
			}
			tmpList = tmpList.concat(result)
			list.value = tmpList
		}
	}
	// 去标签列表详情页
	const toSubtopic = (item) => {
		uni.navigateTo({
			url: `subtopic?id=${item.mid_table_remark_008}&subname=${encodeURIComponent(item.mid_table_remark_015)}&sessionId=${encodeURIComponent(item.mid_table_remark_013)}`
		})
	}
	// 点赞
	const onLikeItem = async (idx) => {
		let item = list.value[idx]
		if (item && item.id_public_middle_table) {
			if (item.show_save_data_003) {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					pre_db_para_id_public_middle_table: item.show_save_data_003.id_public_middle_table,
					is_online: (item.show_save_data_003.is_online && item.show_save_data_003.is_online !==
						'0') ? 0 : 1,
				}
				middleAPI(queryParas).then(() => {
					let flagIncre = item.show_save_data_003.is_online && item.show_save_data_003
						.is_online !== '0'
					item.show_save_data_003.is_online = (flagIncre) ? 0 : 1
					item.show_save_data_005 = parseInt(item.show_save_data_005) + (flagIncre ? 1 : -1)
				}, err => {
					console.log(err, ">>>>>")
				})
			} else {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					is_online: 0,
					id_public_user_info: userInfo?.value?.id_public_user_info || '',
					mid_table_remark_001: item.mid_table_remark_001,
					mid_table_remark_002: item.mid_table_remark_002,
					mid_table_remark_013:item.mid_table_remark_013,
					mid_table_remark_017: userInfo?.value?.nick_name || '-1',
					mid_table_remark_018: userInfo?.value?.user_phone || '-1',
					mid_table_remark_019: -1, //userInfo?.value?.weichat_img || '-1',
					table_id_father: item.id_public_middle_table,
					type_middle_app: 90001,
					type_inner_app: 2002,
				}
				let response = await middleAPI(queryParas).catch((err) => {
					console.log(err)
				})
				console.log(response)
				if (response) {
					item.show_save_data_003 = response?.page_content[0] || null
					item.show_save_data_005 = parseInt(item.show_save_data_005) + 1

				}

			}

		}
	}
	// 去会话详情页
	const handleToChatTheir = (idx) => {
		let item = list.value[idx]
		uni.navigateTo({
			url: `/pages/chat/chat-their?id=${item.mid_table_remark_008}&subname=${encodeURIComponent(item.mid_table_remark_015)}&sessionId=${encodeURIComponent(item.mid_table_remark_013)}`
		})
	}
	// 去提问
	const handleToChat = () => {
		uni.navigateTo({
			url: `/pages/chat/index?id=${currentIndustryId.value}`
		})
	}
	// 互动中心
	const handleToPost = () => {
		uni.navigateTo({
			url: `/pages/post/index?id=${currentIndustryId.value}&name=${encodeURIComponent(showTopic.value)}`
		})
	}
	// 页面数据加载
	const initData = async () => {
		let tagResponse = await getTagList().catch((err) => {
			console.log(err, '>>>tagResponse')
			tagList.value = [];
		});
		if (tagResponse) {
			let tagResult = tagResponse?.page_content || [];
			tagList.value = tagResult
			pageLoading.value = true;
		}
		page.value = 1;
		notMore.value = false;
		list.value = []
		getList()

	}
	
	// 搜索功能
	const onConfirmSearch = () => {
		page.value = 1;
		notMore.value = false;
		list.value = []
		getList()
	}
	onShow(() => {
		initData()
	})
	// 加载更多
	onReachBottom(()=>{
		if(notMore.value){
			return;
		}
		page.value+=1;
		getList()
	})
</script>

<style lang="less" scoped>
	.page-topic {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 203rpx;
		box-sizing: border-box;
		background-color: #182836;
		display: flex;
		display: -wekbit-flex;
		flex-direction: column;

		.wrap-nav-topic {
			position: relative;
			width: 100%;
			flex-shrink: 0;
		}

		.wrap-subtopic {
			position: relative;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 32rpx;
			margin-top: 19rpx;
			margin-bottom: 50rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			flex-shrink: 0;

			.item-subtopic {
				position: relative;
				width: 332rpx;
				background: #213343;
				border-radius: 32rpx;
				margin-right: 22rpx;
				margin-bottom: 22rpx;
				padding: 32rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				// font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 32rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}

				&.fill {
					width: 100%;
					margin-right: 0;
				}

				.cont-description {
					position: relative;
					font-size: 24rpx;
					// font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.5);
					line-height: 24rpx;
					margin-top: 20rpx;
				}
			}
		}

		.wrap-recommend-title {
			position: relative;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			margin-bottom: 48rpx;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			// align-items: center;
			justify-content: space-between;
			flex-shrink: 0;

			.wrap-logo-title {
				position: relative;
				flex: 1;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				// align-items: baseline;
				font-size: 44rpx;
				line-height: 44rpx;
				// font-family: HelloFont WenYiHei;
				font-weight: 400;
				color: #FFFFFF;

				.icon-logo {
					position: relative;
					width: 63rpx;
					height: 70rpx;
					vertical-align: top;
					margin-right: 15rpx;
				}

				.cont-title {
					position: relative;
					height: 81rpx;
					padding-top: 24rpx;
					box-sizing: border-box;

					.img-title {
						position: relative;
						width: 172rpx;

						height: 42rpx;
					}

					.img-line {
						position: absolute;
						content: ' ';
						width: 120rpx;
						height: 4rpx;
						// background: linear-gradient(90deg, rgba(72, 194, 130, 1) 0%, rgba(24, 40, 54, 1) 100%);
						bottom: 0;
						left: 50%;
						transform: translate(-50%, 0);
						-webkit-transform: translate(-50%, 0);
					}
				}
			}

			.wrap-search {
				position: relative;
				width: 345rpx;
				height: 72rpx;
				margin-top: 9rpx;
			}
		}

		.wrap-list {
			position: relative;
			flex: 1;
			min-height: 453rpx;
			// background-color: red;

			.wrap-list-item {
				position: relative;
				width: 100%;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.box-empty {
				position: absolute;

				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);

				.icon-none {
					position: relative;
					width: 326rpx;
					height: 326rpx;
					margin: 64rpx auto;
					vertical-align: top;

				}
			}


		}

		.container-bottom {
			position: fixed;
			width: 100%;
			height: 183rpx;
			background: #182836;
			box-shadow: 0px -2rpx 10rpx 0px rgba(255, 255, 255, 0.08);
			border-radius: 56rpx 56rpx 0px 0px;
			box-sizing: border-box;
			bottom: -1px;

			.btn {
				position: relative;
				width: 686rpx;
				height: 120rpx;
				// background: linear-gradient(0deg, #10A383 0%, #48C282 100%);
				background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
				border-radius: 60rpx;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				margin: 24rpx auto 0;
				line-height: 36rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 600;
				// color: #FFFFFF;
				color: #182836;

				.icon-go {
					position: absolute;
					width: 92rpx;
					height: 92rpx;
					background: #FFFFFF;
					border-radius: 50%;
					box-sizing: border-box;
					top: 50%;
					right: 14rpx;
					transform: translate(0, -50%);
					-webkit-transform: translate(0, -50%);

					.img-go {
						position: absolute;
						width: 48rpx;
						height: 48rpx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						-webkit-transform: translate(-50%, -50%);
					}
				}
			}

		}
	}
	
	.ball {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(255,255,255,0.3);
		opacity: 1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 32rpx;
		bottom: 234rpx;
	}
</style>